<template>
  <cu-layout :bgStyle="{ color: '#ffffff' }" :navProp="{ placeholder: true }">
    <view :class="[`${prefixCls}-user-info-container`]">
      <uv-form labelPosition="left" :model="formData" labelWidth="120px" ref="form">
        <uv-form-item label="姓名" prop="name" borderBottom>
          <uv-input v-model="formData.name" disabled disabledColor="white" inputAlign="right" border="none"> </uv-input>
        </uv-form-item>
        <uv-form-item label="证件类型" prop="card_type" borderBottom>
          <uv-input v-model="formData.card_type" disabled disabledColor="white" inputAlign="right" border="none"> </uv-input>
        </uv-form-item>
        <uv-form-item label="证件号码" prop="card_num" borderBottom>
          <uv-input v-model="formData.card_num" disabled disabledColor="white" inputAlign="right" border="none"> </uv-input>
        </uv-form-item>
        <uv-form-item label="通讯地址" prop="address" borderBottom>
          <uv-input v-model="formData.address" disabled disabledColor="white" inputAlign="right" border="none"> </uv-input>
        </uv-form-item>
        <uv-form-item label="邮箱" prop="e_mail" borderBottom>
          <uv-input v-model="formData.e_mail" disabled disabledColor="white" inputAlign="right" border="none"> </uv-input>
        </uv-form-item>
        <uv-form-item label="紧急联系人" prop="emergency_name" borderBottom>
          <uv-input v-model="formData.emergency_name" disabled disabledColor="white" inputAlign="right" border="none"> </uv-input>
        </uv-form-item>
        <uv-form-item label="紧急联系人手机号" prop="emergency_tel" borderBottom>
          <uv-input v-model="formData.emergency_tel" disabled disabledColor="white" inputAlign="right" border="none"> </uv-input>
        </uv-form-item>
      </uv-form>
      <view class="fixed-button" :style="{ bottom: `${safeAreaInsets}rpx` }">
        <text class="message">以上信息若要修改请联系门店管家修改</text>
        <!-- <uv-text color="#d66425" text="以上信息若要修改请联系门店管家修改"></uv-text> -->
      </view>
    </view>
  </cu-layout>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'info',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      safeAreaInsets: 0,
      formData: {
        name: '',
        card_type: '',
        card_num: '',
        address: '',
        e_mail: '',
        emergency_name: '',
        emergency_tel: '',
      },
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['isLogin', 'userInfo']),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    this.safeAreaInsets = this.$Platform.device.safeAreaInsets.bottom || 0
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  async onShow() {
    await this.GetUserInfo()
    // const { name, card_type, card_num, address, e_mail, emergency_name, emergency_tel } = this.userInfo
    for (let key in this.formData) {
      this.formData[key] = this.userInfo[key]
    }
  },
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions('user', ['GetUserInfo']),
    submit() {},
  },
}
</script>

<style lang="scss" scoped>
page {
  background: white !important;
}
.#{prefixCls('user-info-container')} {
  position: relative;
  background: white;
  box-sizing: border-box;
  overflow: hidden;
  padding: 15px;
  .fixed-button {
    position: fixed;
    left: 0;
    z-index: 2;
    width: 100%;
    background: linear-gradient(to bottom, white, #f5f5f5);
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    border-top: 1px solid #f1f1f1;
    display: flex;
    .message {
      flex: 1;
      font-size: 12px;
      padding: 5px 0;
      text-align: center;
      color: #d66425;
    }
  }
}
</style>
